<template>
  <div>
    <top-bar :turn="turn" :current-player-index="currentPlayerIndex" :players="players"></top-bar>
    <transition name="hand">
      <Hand :cards="testHand" v-if="!activeOverlay" @card-play="testPlayCard"/>
    </transition>
    <transition name="fade">
      <div class="overlay-background" v-if="activeOverlay"></div>
    </transition>
    <transition name="zoom">
      <Overlay v-if="activeOverlay" :key="activeOverlay">
        <component
          :is="'overlay-content-' + activeOverlay"
          :player="currentPlayer"
          :opponent="currentOpponent"
          :players="players"
        ></component>
      </Overlay>
    </transition>
  </div>
</template>

<script>
import { people, state } from "./state";
import { getWorldRatio } from "./util";
import topBar from "./components/top-bar";
import card from "./components/card";
import { cards } from "./card.js";
import Hand from "./components/hand";
import Overlay from "./components/overlay";
import overlayContentPlayerTurn from "./components/over-content-player-turn";
import overlayContentLastPlay from "./components/over-content-last-play";
import overlayGameOver from "./components/overlay-content-game-over";
export default {
  data() {
    return {
      ...state,
      ...people,
      cards: cards
    };
  },
  components: {
    topBar,
    card,
    Hand,
    Overlay,
    overlayContentPlayerTurn,
    overlayContentLastPlay,
    overlayGameOver
  },
  methods: {
    testPlayCard(card) {
      const index = this.testHand.indexOf(card);
      console.log(index);
      this.testHand.splice(index, 1);
    },
    handlePlay() {
      console.log("You played a card!");
    },
    createTestHand() {
      const cards = [];
      const ids = Object.keys(this.cards);
      for (let i = 0; i < 5; i++) {
        cards.push(this.testDrawCard());
      }
      return cards;
    },
    testDrawCard() {
      const ids = Object.keys(this.cards);
      const randomId = ids[Math.floor(Math.random() * ids.length)];
      return {
        uid: this.cardUid++,
        id: randomId,
        def: this.cards[randomId]
      };
    }
  },
  computed: {
    testCard() {
      return cards.archers;
    }
  },
  created() {
    this.testHand = this.createTestHand();
  },
  mounted() {
    window.addEventListener("resize", () => {
      state.worldRatio = getWorldRatio();
    });
  }
};
</script>

<style scoped>
.hand-enter-active,
.hand-leave-active {
  transition: opacity 1s;
}
.hand-enter,
.hand-leave-to {
  opacity: 0;
}
.zoom-enter-active,
.zoom-leave-active {
  transition: opacity .3s, transform .3s;
}
.zoom-enter,
.zoom-leave-to {
  opacity: 0;
  transform: scale(.7);
}
</style>
